<template>
    <div class="map-container-wrapper"
         :style="{flexDirection:isColumn?'row':'column'}" :class="isColumn?'':'column-gutter'">
        <!-- <ArcMap :mapType="mapType1" ref="mainMap"
                @splitMapEvent="handleSplitMapEvent"
                @showMapPopupEvent="handleMainMapShowMapPopupEvent"
                :mapTools="mapTools[0]"
                :spatialUnit="mapData[0].spatialUnit"
                :isSplit="isSplit"
                :renderData="mapData[0].renderData"
                @loadState="setLoadState"/> -->
          <ArcMap :mapType="mapType1" ref="mainMap" :mapID="mapType2"
              @showMapPopupEvent="handleMainMapShowMapPopupEvent"
              :mapTools="mapTools[0]"
              :isSplit="isSplit"
              @loadState="setLoadState"
              @odChart="getODChart"/>
        <!-- <ArcMap :mapType="mapType2" ref="splitMap"
                v-show="isSplit"
                @splitMapEvent="handleSplitMapEvent"
                @showMapPopupEvent="handleSplitMapShowMapPopupEvent"
                :mapTools="mapTools[1]"
                :spatialUnit="mapData[1].spatialUnit"
                :renderData="mapData[1].renderData"/> -->
    </div>
</template>

<script>
import ArcMap from '@/components/ArcMap'
import { loadEsriModule } from '@/utils/jsapi'
import { synchronizeViews } from '@/utils/synchronizeView'
// import Axios from 'axios'
// import regionCenters from '@/utils/regionCenters'
import bus from '@/modules/eventbus'
import env from '@/utils/env'
import MapUtils from '@/utils/MapUtils'
// import {chaiweiPopupTemplate} from '@/utils/layerPopupTemplate'
export default {
  name: 'MapControl',
  components: { ArcMap },
  data () {
    return {
      isSplit: this.isSplitScreen,
      mapTools: [{
        zoomIn: true,
        zoomOut: true,
        baseMapManager: this.$route.path !== '/spotsdetail',
        layerManager: this.$route.path == '/spotsdetail',
        layerOpacity: this.$route.path == '/spotsdetail',
        fullExtent: true,
        search: true,
        splitMap: true,
        isOverlayShow: false,
        isFloatTestFlag: false
      }, {
        zoomIn: false,
        zoomOut: false,
        layerManager: false,
        baseMapManager: false,
        fullExtent: false,
        search: false,
        splitMap: false,
        isOverlayShow: true,
        isFloatTestFlag: false
      }],
      mapData: {},
      isLoaded: false,
      odChart: null,
      isClick: false,
    }
  },
  props: {
    isColumn: {
      type: Boolean,
      default () {
        return false
      }
    },
    isSplitScreen: {
      type: Boolean,
      default () {
        return false
      }
    },
    mapTypes: {
      type: String,
      default () {
        return 'vector_raster'
      }
    },
    isFloatTest: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  computed: {
    curIsFloatTest () {
      return this.isFloatTest
    },
    mapType1 () {
      return this.mapTypes.split('_')[0]
    },
    mapType2 () {
      return this.mapTypes.split('_')[1]
    },
    // 当前接口地址
    curMapApiUrl () {
      return this.$store.getters.curMapApiUrl
    },
    // 地图参数
    paramsCondition () {
      return JSON.stringify(this.$store.getters.paramsCondition)
    },

    curRegionLevel () {
      return this.$store.getters.curRegionLevel
    },
    curRegionCode () {
      return this.$store.getters.curRegionCode
    },
    curfeature (val) {
      if (val) { return this.$store.getters.curfeature }
    },
  },
  methods: {
    async splitMap () {
      const [watchUtils] = await loadEsriModule(['esri/core/watchUtils'])
      let mainView = this.$store.getters.leftMapView// this.$refs.mainMap.getMapView()
      let splitView = this.$store.getters.rightMapView// this.$refs.splitMap.getMapView()
      synchronizeViews([mainView, splitView], watchUtils)
    },
    handleSplitMapEvent () {
      // 1、打开隐藏的地图
      this.isSplit = !this.isSplit
      // 2、分屏挂接，初始化
      if (this.isSplit) this.splitMap()
    },
    handleMainMapShowMapPopupEvent (regionCode, mapPoint) {
      if (this.isSplit) {
        this.$refs.splitMap.showMapPopup(regionCode, mapPoint)
      }
    },
    handleSplitMapShowMapPopupEvent (regionCode, mapPoint) {
      this.$refs.mainMap.showMapPopup(regionCode, mapPoint)
    },
    renderMap1 (renderData) {
      this.$refs.mainMap.renderFeatureLayer(renderData)
    },
    async renderMap2 (renderData) {
      this.$refs.splitMap.renderFeatureLayer(renderData)
    },
    refreshMapData () {
      this.$refs.mainMap.refreshMapData()
    },
    setLoadState (data) {
      this.isLoaded = data
    },
    getODChart (chart) {
      this.odChart = chart
    }
  },
  created () {
  },
  mounted () {
    if (this.isLoaded) {
      this.refreshMapData()
    }
  },
  watch: {
    //  // 深度监听条件状态变化
    paramsCondition: {
      deep: true,
      handler: function (newVal, oldVal) {
        let newObj = JSON.parse(newVal)
        let oldObj = JSON.parse(oldVal)


        let self = this
        let mapView = self.$refs.mainMap.getMapView()
        let newLevel = newObj.regionlevel
        let oldLevel = oldObj.regionlevel
        let newCode = newObj.regioncode
        let oldCode = oldObj.regioncode
        let newYear = newObj.year
        let oldYear = oldObj.year
        let newMonth = newObj.month
        let oldMonth = oldObj.month
        let newRegionName = newObj.regionname
        if (newLevel != oldLevel) {
          self.refreshMapData()
        }
        if ((newCode && oldCode) && (newCode !== oldCode)) {
          if ((newCode.length == oldCode.length) && oldCode != '110000') {
            self.refreshMapData()
          }
          if (self.mapType2 == 'vector') {
            let isClick = self.$store.getters.isMapClick
            if (!isClick) {
              if (self.odChart) {
                self.odChart.queryFeatures(newCode).then(function (result) {
                  let feature = result.features[0]
                  self.$store.dispatch('changefeature', feature)
                })
              }
            }
          }
        }
        if (newYear != oldYear) {
          if (mapView) {
            let year = newYear.toString()
            let regionLevel = self.$store.getters.curRegionLevel
            mapView.graphics.removeAll()// 清除上一次点击目标
            MapUtils.addChaiWeiLayer(mapView, year, env.getChaiWeiPopup()[year], newLevel, newRegionName)
          }
        }
        if (newMonth != oldMonth) {
          if (mapView) {
            let month = newMonth.toString()
           // if (month>=1 && month<=12) {
              let regionLevel = self.$store.getters.curRegionLevel
              mapView.graphics.removeAll()// 清除上一次点击目标
              let layer_chaiwei = mapView.map.layers.find(lyr => {
                return lyr.id === 'layer-chaiwei'
              })
              let layer_chaiwei_0 = layer_chaiwei.findSublayerById(0)
              layer_chaiwei_0.definitionExpression = MapUtils.getTimeFilter(newYear, newMonth)
            //}
          }
        }
        //   }
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
    .map-container-wrapper
        height 100%
        width 100%
        display flex

        & > div
            flex 1

    .column-gutter
        & > div:first-child
            padding-bottom 5px

        & > div:last-child
            padding-top 5px
</style>
